<template>
  <div id="step-config" class="step-config">
    <div class="header">
      <el-steps
        direction="vertical"
        :active="stepOrder"
        finish-status="success"
        :align-center="true"
      >
        <el-step
          v-for="item in stepInfos"
          :key="item.id"
          :description="item.description"
        >
          <template slot="icon">
            <i :class="'iconfont ' + item.icon" />
          </template>
          <template slot="title">
            <div style="width: 100%; position: relative;">
              <span :style="resetColor(item.isActive)">{{ item.title }}</span>
              <el-switch
                v-model="item.isActive"
                style="float: right"
                active-text="激活"
                inactive-text="取消"
                :disabled="isDisabled"
                @change="activeStep(item)"
              />
            </div>
          </template>
          <template slot="description">
            <span :style="resetColor(item.isActive)">{{ item.description }}</span>
          </template>
        </el-step>
      </el-steps>
    </div>
    <div class="operation-btns">
      <div style="display: flex;justify-content: center;align-items: center; margin-top: 10px;">
        <el-button
          size="mini"
          type="primary"
          :disabled="isDisabled || stepInfos.filter(item => { return item.isActive === true }).length === 0"
          @click="doBuildOp"
        >构建</el-button>
        <el-button size="mini" @click="cancelSet">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'StepConfig',
  props: {
    componentId: {
      type: String,
      required: true,
      default: ''
    }
  },
  data() {
    return {
      value: true,
      stepInfos: [{
        id: 'gitPull',
        order: 1,
        title: '拉取代码',
        description: '使用Git从代码仓中拉取源码。',
        icon: 'icon-laqudaima',
        isActive: true
      }, {
        id: 'compile',
        order: 2,
        title: '编码源码',
        description: '编译源如果需要的话，Java使用maven，前端使用node，python一般不需要编译。',
        icon: 'icon-bianyizhong',
        isActive: true
      }, {
        id: 'localPack',
        order: 3,
        title: '本地打包',
        description: '添加版本信息，并将编译后文件、版本信息文件和其他预升级文件打成zip包。',
        icon: 'icon-016-dabao',
        isActive: true
      }, {
        id: 'remotePush',
        order: 4,
        title: '推送远端',
        description: '将本地打包好的zip包推送到远端服务器，一般为项目IP所在的环境（有时也称跳板机）。',
        icon: 'icon-tuisong',
        isActive: true
      }, {
        id: 'execUpgrade',
        order: 5,
        title: '执行升级',
        description: '执行远程升级，使用SSH输入相关命令，将需升级的文件复制到对应的目录，并执行升级脚本或者命令。',
        icon: 'icon-shengban-shengji',
        isActive: true
      }],
      stepOrder: 5,
      isDisabled: false
    }
  },
  emits: ['detail-config-cancel', 'detail-config-build'],
  computed: {
    ...mapGetters([
      'buildStep',
      'detailConfigs'
    ])
  },
  watch: {
    buildStep: {
      immediate: true,
      deep: true,
      handler(newVal) {
        this.isDisabled = newVal[this.componentId] === 1
      }
    }
  },
  mounted() {
    const cfg = this.detailConfigs[this.componentId]
    if (cfg) {
      const stepOrders = cfg['stepOrders']
      if (stepOrders && stepOrders.length > 0) {
        this.stepInfos.forEach(item => {
          item.isActive = !!stepOrders.includes(item.order)
        })
      }
    }
  },
  methods: {
    // 步骤激活操作
    activeStep(item) {
      // 激活时，则将当前步骤设置为与激活一致，取消时则以正在操作步骤减1，若是第一个，设置为-1，且大于当前order的isActive都设置为false
      const isActive = item.isActive
      if (isActive) {
        this.stepOrder = item.order
        this.stepInfos.forEach(step => {
          if (step.order < item.order) {
            step.isActive = true
          }
        })
        return
      }

      this.stepOrder = item.order - 1
      if (this.stepOrder === 0) {
        this.stepOrder = -1
      }
      this.stepInfos.forEach(step => {
        if (step.order > item.order) {
          step.isActive = false
        }
      })
    },

    // 重设标题和描述的字体颜色
    resetColor(isActive) {
      if (isActive) {
        return 'color: #67C23A;'
      }
      return 'color: #C0C4CC;'
    },

    // 执行构建操作
    doBuildOp() {
      this.saveCfg()
      this.$emit('detail-config-build')
    },

    // 保存配置信息，在切换tab页时由父组件调用
    saveCfg() {
      // 开始构建时至少要有1个激活步骤，否则不能开始
      const activeSteps = this.stepInfos.filter(item => { return item.isActive })
      if (activeSteps.length === 0) {
        this.$message.warning('当前未激活任何步骤，请确认操作是否有误？')
        return
      }
      const stepOrders = []
      activeSteps.forEach(item => stepOrders.push(item.order))
      this.$store.commit('project/SET_DETAIL_CONFIG', {
        componentId: this.componentId,
        stepOrders: stepOrders
      })
    },

    // 执行取消操作
    cancelSet() {
      this.$emit('detail-config-cancel')
    }
  }
}
</script>

<style scoped>
.step-config {
  width: 100%;
  height: 500px;
  text-align: center;
  position: relative;
  padding: 10px;
  box-sizing: border-box;
}

.step-config .header {
  height: 460px;
}

.operation-btns {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 4px;
  z-index: 2000;
}
</style>
